<template>
    <div class="listCom">
        <div class="item" v-for="(item, index) in list" :key="index" @click="detail(item)">
            <img :src="item.show_image" />
            <div class="cont">
                <div class="name">
                    {{ item.name }}
                </div>
                <div class="bottom">
                    <el-button size="mini">详情</el-button>
                    <el-button size="mini" @click.stop="jumpPage(item)">3D展示</el-button>
                </div>
            </div>
        </div>
        <i></i>
        <i></i>

    </div>
</template>

<script>
import { getStoreRoom } from '@/api/list'
export default {
    data() {
        return {
            list: []
        }
    },
    created() {
        this.getStoreRoom()
    },
    methods: {
        getStoreRoom() {
            getStoreRoom().then(res => {
                console.log(res);
                this.list = res.data
            }).catch(e => {
                console.log(e);
            })
        },
        detail(val) {
            this.$router.push('/tomb_detail?id='+val.id)
        },
        jumpPage(val) {
            console.log(val);
            // this.$router.push('/3d?url='+val.model_url)
            const routeUrl = this.$router.resolve({
                path: '/3d',
                query: {
                    url: val.model_url+'?storeroom_id='+val.id+'?token='+localStorage.getItem('token')
                }
            })
            window.open(routeUrl.href, '_black')
            // let url = val.model_url+'?storeroom_id='+val.id+'?token='+localStorage.getItem('token')
            // window.open(url, '_black')
        }
    }
}
</script>

<style lang="scss" scoped>
.listCom {
    width: 1000px;
    margin: 0 auto;
    padding: 20px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .item {
        width: 240px;
        margin-bottom: 10px;
        cursor: pointer;

        img {
            width: 100%;
            height: 190px;
        }

        .cont {
            background: #fff;
            padding: 10px;

            .name {
                font-size: 20px;
                font-family: PingFang SC-Semibold, PingFang SC;
                font-weight: 600;
                color: #683C19;
                text-align: left;
            }

            .bottom {
                margin-top: 10px;
                display: flex;
                justify-content: space-between;
            }
        }
    }

    i {
        width: 240px;
    }
}
</style>